import React, { useEffect, useState, forwardRef } from 'react';
import PropTypes from 'prop-types';
import styles from './index.less';
import { MoreOutlined } from '@ant-design/icons'
import { Button, Drawer, Tag, Input, message, Modal, Dropdown, Menu, Pagination } from 'antd';
import cx from 'classnames';
import moment from 'moment';
import { reqUserMoment, reqHidden } from '@/services/index'

const { TextArea } = Input;

const sexMap = {
    'M': '男',
    'F': '女',
    'NONE': '未知'
}

const UserDrawer = forwardRef(({ data = {}, user = {}, onOk }, ref) => {
    const [visible, setVisible] = useState(false)
    const [currentTab, setCurrentTab] = useState(1)
    const [refuseVisible, setRefuseVisible] = useState(false)
    const [remark, setRemark] = useState('')
    const [offset, setOffset] = useState(0); // 分页
    const [moments, setMoments] = useState([])
    const [total, setTotal] = useState(0)

    useEffect(() => {
        getMoment()
    }, [currentTab, offset])

    useEffect(() => {
        if (!visible) {
            setOffset(0)
        }
    }, [visible])

    const getMoment = () => {
        if (currentTab == 3) {
            reqUserMoment({
                user_id: user.userid,
                limit: 10,
                offset: offset
            }).then(res => {
                setTotal(res.data ? res.data.count : 0)
                setMoments(res.data.talkingTips)
            })
        }
    }

    if (ref) {
        ref.current = {
            open: () => {
                setVisible(true)
            },
            close: () => {
                setVisible(false)
            }
        }
    }

    const tabChange = (value) => {
        setCurrentTab(value)
    }

    const handleOk = (type) => {
        if (type == 1) {
            onOk(type)
        } else {
            if (!remark) {
                message.error('请输入驳回原因。')
                return
            }
            onOk(type, remark)
            setRefuseVisible(false)
        }
    }

    const handleHidden = (id) => {
        reqHidden({
            id
        }).then(res => {
            message.success(res.message);
            getMoment()
        })
    }
    const menu = (item) => {
        return <Menu>
            <Menu.Item onClick={() => handleHidden(item._id)}>
                设为仅自己可见
            </Menu.Item>
        </Menu>
    }
    const test = 4;
    return <Drawer
        title="用户详情"
        width={600}
        placement="right"
        closable={false}
        onClose={() => setVisible(false)}
        visible={visible}
        className={styles.detailDraw}
    >
        <div className={styles.detailWrap}>
            <div className={styles.userInfo}>
                <div className={styles.avatar}>
                    <img src={user.avatar} alt=""/>
                </div>
                <div className={styles.info}>
                    <div>{user.nick_name || '-'} VIP：{user.vip} {user.certificated ? '已认证' : '未认证'}</div>
                    <div>ID：xxx 手机号：{user.mobile}</div>
                    <div className={styles.status}>
                        <Tag color="blue">性别：{sexMap[user.sex]}</Tag>
                        <Tag color="blue">出生：{user.birthday}</Tag>
                        <Tag color="blue">{user.user_status}</Tag>
                    </div>
                    <div>交由心声：{user.soliloquy}</div>
                </div>
                <div className={styles.time}>
                    <span>创建时间：{moment(user.created_time).format('YYYY-MM-DD HH:mm')}</span>
                    <span>最近活跃：{moment(user.loginAt).format('YYYY-MM-DD HH:mm')}</span>
                </div>
            </div>
            <div className={styles.userData}>
                <div className={styles.tabBar}>
                    <div className={cx(styles.item, currentTab == 1 ? styles.active : null)} onClick={() => tabChange(1)}>认证信息</div>
                    <div className={cx(styles.item, currentTab == 2 ? styles.active : null)} onClick={() => tabChange(2)}>基础信息</div>
                    <div className={cx(styles.item, currentTab == 3 ? styles.active : null)} onClick={() => tabChange(3)}>用户动态</div>
                </div>
                {
                    currentTab == 1 ? <div className={styles.content}>
                        <div className={styles.card}>
                            <img src={data.authData && data.authData.vcard_positive} alt=""/>
                            <img src={data.authData && data.authData.vcard_negative} alt=""/>
                        </div>
                        <div className={styles.hand}>
                            <img src={data.authData && data.authData.vcard_inhand} alt=""/>
                        </div>
                        <div className={styles.audit}>
                            <Button style={{ marginRight: 10 }} type='primary' onClick={() => handleOk(1)}>审核通过</Button>
                            <Button onClick={() => setRefuseVisible(true)}>驳回</Button>
                        </div>
                    </div> : null
                }
                {
                    currentTab == 2 ? <div className={styles.content}>
                        <div>{user.interest}</div>
                        <div>年龄：{user.birthday}</div>
                        <div>身高：{user.height}</div>
                        <div>婚况：{user.marital_status}</div>
                        <div>籍贯：{user.native_place}</div>
                        <div>学历：{user.education}</div>
                        <div>毕业学校：没有字段</div>
                        <div>工作地点：{user.work_place}</div>
                        <div>工作：{user.work_type}</div>
                        <div>月薪：{user.salary}</div>
                        <div>单位性质：{user.work_type}</div>
                        <div>住房：{user.housing}</div>
                        <h4 style={{ marginTop: 20 }}>择偶要求：</h4>
                        <div>性格：{data.customize && data.customize.personality.map(item => <span>{item.label}</span>)}</div>
                        <div>兴趣：{data.customize && data.customize.interest.map(item => <span>{item.label}</span>)}</div>
                        <div>年龄：{data.customize && data.customize.age}</div>
                        <div>婚姻状态：{data.customize && data.customize.marital_status.label}</div>
                        <div>身高范围：{data.customize && data.customize.height}</div>
                        <div>学历：{data.customize && data.customize.education.label}</div>
                        <div>工作地：{data.customize && data.customize.work_place}</div>
                        <div>月收入：{data.customize && data.customize.salary.label}</div>
                        <div>最在意对方：{data.customize && data.customize.best_of_all.map(item => <span>{item}</span>)}</div>
                    </div> : null
                }
                {
                    currentTab == 3 ? <div className={styles.content}>
                        <div className={styles.moment}>
                            {
                                moments.length ? moments.map((item) => <div className={styles.item}>
                                <div className={styles.time}>{moment(item.created_time).format('YYYY-MM-DD HH:hh:ss')}</div>
                                <div className={styles.momentContent}>
                                    <div className={styles.left}>
                                        <p className={styles.title}>{item.note}</p>
                                        <div className={styles.picContainer}>
                                            {
                                                item.pic_urls && item.pic_urls.length == 1 ? <img className={styles.single} src={item.pic_urls[0]} /> : null
                                            }
                                            {
                                                item.pic_urls && item.pic_urls.length > 1 ? item.pic_urls.map(pic => <img className={styles.muti} src={pic} />) : null
                                            }
                                        </div>
                                    </div>
                                    <div className={styles.right}>
                                        <span>{item.isHidden ? '仅自己可见' : '正常'}</span>
                                        <Dropdown overlay={() => menu(item)}>
                                            <a className="ant-dropdown-link">
                                                <MoreOutlined />
                                            </a>
                                        </Dropdown>
                                    </div>
                                </div>
                            </div>) : null
                            }
                        </div>
                        <Pagination total={total} pageSize={10} current={offset + 1} total={50} onChange={(page) => setOffset(page - 1)} />
                    </div> : null
                }
            </div>
        </div>
        <Modal title="驳回原因" visible={refuseVisible} onOk={() => handleOk(2)} onCancel={() => setRefuseVisible(false)}>
            <TextArea onChange={(e) => setRemark(e.target.value)} rows={4} placeholder='请输入驳回原因' />
        </Modal>
    </Drawer>
})

UserDrawer.propTypes = {
    visible: PropTypes.bool,
    onClose: PropTypes.func,
    data: PropTypes.object,
    onOk: PropTypes.func,
    user: PropTypes.object
};

export default UserDrawer;
